var properties = {
  "data": [
    {
      "id": 1,
      "title": "Real Luxury Villa",
      "listing_for": "Sale",
      "is_featured": true,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.541599,
      "longitude": -0.112588,
      "address": "123 Kathal St. Tampa City",
      "area": 2,
      "bathroom": 3,
      "garage": 1,
      "image": "img/properties/properties-list-1.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 2,
      "title": "Park Avenue",
      "listing_for": "Rent",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.538395,
      "longitude": -0.097418,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-2.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 3,
      "title": "Park Avenue",
      "listing_for": "Rent",
      "is_featured": true,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.539212,
      "longitude": -0.118403,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-3.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 4,
      "title": "Big Head House",
      "listing_for": "Sale",
      "is_featured": true,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.522340,
      "longitude": -0.037894,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-4.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 5,
      "title": "Big Head House",
      "listing_for": "Rent",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.513965,
      "longitude": -0.038837,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-5.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 6,
      "title": "Modern Family Home",
      "listing_for": "Sale",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.503965,
      "longitude": -0.058837,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-1.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 7,
      "title": "Modern Family Home",
      "listing_for": "Rent",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.555385,
      "longitude": -0.128274,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-2.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 8,
      "title": "Relaxing Apartment",
      "listing_for": "Sale",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.560935,
      "longitude": -0.111365,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-3.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 9,
      "title": "Relaxing Apartment",
      "listing_for": "Sale",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.543803,
      "longitude": -0.036607,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-4.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 10,
      "title": "Modern Family Home",
      "listing_for": "Sale",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.527306,
      "longitude": -0.140977,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-5.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 11,
      "title": "Park Avenue",
      "listing_for": "Sale",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.558907,
      "longitude": -0.041842,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-1.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 12,
      "title": "Park Avenue",
      "listing_for": "Sale",
      "is_featured": true,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.550644,
      "longitude": -0.103493,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-2.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 13,
      "title": "Park Avenue",
      "listing_for": "Sale",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.532112,
      "longitude": -0.051885,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-3.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 14,
      "title": "Modern Family Home",
      "listing_for": "Sale",
      "is_featured": true,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.531311,
      "longitude": -0.052314,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-4.jpg",
      "type_icon": "img/building.png",
    },
    {
      "id": 15,
      "title": "Relaxing Apartment",
      "listing_for": "Sale",
      "is_featured": false,
      'author': 'Jhon Doe',
      'date': '5 days ago',
      "latitude": 51.530189,
      "longitude": -0.078750,
      "address": "???? ??? 123?",
      "area": 2,
      "room": 4,
      "bathroom": 3,
      "balcony": 3,
      "lounge": 1,
      "garage": 1,
      "image": "img/properties/properties-list-5.jpg",
      "type_icon": "img/building.png",
    }

  ]
};

function drawInfoWindow(property) {
  var image = 'img/logo.png';
  if (property.image) {
    image = property.image
  }

  var title = 'N/A';
  if (property.title) {
    title = property.title
  }

  var address = '';
  if (property.address) {
    address = property.address
  }

  var area = 1000;
  if (property.area) {
    area = property.area
  }

  var bedroom = 5;
  if (property.bedroom) {
    bedroom = property.bedroom
  }

  var bathroom = 5;
  if (property.bathroom) {
    bathroom = property.bathroom
  }

  var garage = 1;
  if (property.garage) {
    garage = property.garage
  }

  var price = 253.33;
  if (property.price) {
    price = property.price
  }

  var ibContent = '';
  ibContent =
    "<div class='map-properties'>" +
    "<div class='map-img'>" +
    "<img src='" + image + "'/><div class=\"price-ratings-box\">\n" +

    "                                </div>" +
    "</div>" +
    "<div class='map-content'>" +
    "<h4><a href='properties-details.html'>" + title + "</a></h4>" +
    "<p class='address'> <i class='flaticon-pin'></i>" + address + "</p>" +
    "<div class='map-properties-fetures'> " +
    "<span><i class='flaticon-area'></i>  " + area + " sqft</span> " +
    "<span><i class='flaticon-hotel'></i>  " + bedroom + " Beds</span> " +
    "<span><i class='flaticon-bathroom'></i>  " + bathroom + " Baths</span> " +
    "</div>" +
    "</div>";
  return ibContent;
}

function insertPropertyToArray(property, layout) {
  var image = 'img/logo.png';
  if (property.image) {
    image = property.image
  }

  var title = 'N/A';
  if (property.title) {
    title = property.title
  }

  var listing_for = 'Sale';
  if (property.listing_for) {
    listing_for = property.listing_for
  }

  var address = '';
  if (property.address) {
    address = property.address
  }

  var area = 1000;
  if (property.area) {
    area = property.area
  }

  var bedroom = 5;
  if (property.bedroom) {
    bedroom = property.bedroom
  }

  var bathroom = 5;
  if (property.bathroom) {
    bathroom = property.bathroom
  }

  var garage = 1;
  if (property.garage) {
    garage = property.garage
  }

  var balcony = 1;
  if (property.balcony) {
    balcony = property.balcony
  }

  var lounge = 1;
  if (property.lounge) {
    lounge = property.lounge
  }

  var price = 253.33;
  if (property.price) {
    price = property.price
  }

  var is_featured = '';
  if (property.is_featured) {
    is_featured = '<span class="featured">精选</span> ';
  }

  var date = '';
  if (property.date) {
    date = property.date;
  }

  var author = '';
  if (property.author) {
    author = property.author;
  }

  var element = '';

  if (layout == 'grid_layout') {
    element = '<div class="col-lg-6 col-sm-6 col-sm-6"><div class="property-box" id="' + property.id + '">\n' +
      '                            <div class="property-thumbnail">\n' +
      '                                <a href="properties-details.html" class="property-img">\n' +
      '                                    <div class="listing-badges">\n' +
      '                                        ' + is_featured + '\n' +
      '                                    </div>\n' +
      '                                    <div class="price-box"><span>$850.00</span> Per month</div>\n' +
      '                                    <img class="d-block w-100" src="' + image + '" alt="properties">\n' +
      '                                </a>\n' +
      '                            </div>\n' +
      '                            <div class="detail">\n' +
      '                                <h1 class="title">\n' +
      '                                    <a href="properties-details.html">' + title + '</a>\n' +
      '                                </h1>\n' +
      '\n' +
      '                                <div class="location">\n' +
      '                                    <a href="properties-details.html">\n' +
      '                                        <i class="flaticon-pin"></i>' + address + '\n' +
      '                                    </a>\n' +
      '                                </div>\n' +
      '                            </div>\n' +
      '                            <ul class="facilities-list clearfix">\n' +
      '                                <li>\n' +
      '                                    <span>Area</span>' + area + ' Sqft\n' +
      '                                </li>\n' +
      '                                <li>\n' +
      '                                    <span>Beds</span> ' + bedroom + ' \n' +
      '                                </li>\n' +
      '                                <li>\n' +
      '                                    <span>Baths</span> ' + bathroom + ' \n' +
      '                                </li>\n' +
      '                                <li>\n' +
      '                                    <span>Garage</span> ' + garage + '\n' +
      '                                </li>\n' +
      '                            </ul>\n' +
      '                            <div class="footer">\n' +
      '                                <a href="#">\n' +
      '                                    <i class="flaticon-people"></i> ' + author + ' \n' +
      '                                </a>\n' +
      '                                <span>\n' +
      '                                <i class="flaticon-calendar"></i>' + date + ' \n' +
      '                            </span>\n' +
      '                            </div>\n' +
      '                        </div></div>';
  }
  else {
    element = '<div class="property-box-2" id="' + property.id + '">\n' +
      '                    <div class="row">\n' +
      '                        <div class="col-lg-5 col-md-5 col-pad">\n' +
      '                            <div class="property-thumbnail">\n' +
      '                                <a href="properties-details.html" class="property-img">\n' +
      '                                    <img src="' + image + '" alt="properties" class="img-fluid">\n' +
      '                                    <div class="listing-badges">\n' +
      '                                        ' + is_featured + '  \n' +
      '                                    </div>\n' +
      '                                    <div class="price-box"><span>$' + price + '</span> Per month</div>\n' +
      '                                </a>\n' +
      '                            </div>\n' +
      '                        </div>\n' +
      '                        <div class="col-lg-7 col-md-7 col-pad">\n' +
      '                            <div class="detail">\n' +
      '                                <div class="hdg">\n' +
      '                                    <h3 class="title">\n' +
      '                                        <a href="properties-details.html">' + title + '</a>\n' +
      '                                    </h3>\n' +
      '                                    <h5 class="location">\n' +
      '                                        <a href="properties-details.html">\n' +
      '                                            <i class="flaticon-location"></i>' + address + '\n' +
      '                                        </a>\n' +
      '                                    </h5>\n' +
      '                                </div>\n' +
      '                                <ul class="facilities-list clearfix">\n' +
      '                                    <li>\n' +
      '                                        <span>Area</span>' + area + ' Sqft\n' +
      '                                    </li>\n' +
      '                                    <li>\n' +
      '                                        <span>Beds</span> ' + bedroom + ' \n' +
      '                                    </li>\n' +
      '                                    <li>\n' +
      '                                        <span>Baths</span> ' + bathroom + ' \n' +
      '                                    </li>\n' +
      '                                    <li>\n' +
      '                                        <span>Garage</span> ' + garage + ' \n' +
      '                                    </li>\n' +
      '                                </ul>\n' +
      '                                <div class="footer">\n' +
      '                                    <a href="#" tabindex="0">\n' +
      '                                        <i class="flaticon-people"></i> ' + author + ' \n' +
      '                                    </a>\n' +
      '                                    <span>\n' +
      '                                          <i class="flaticon-calendar"></i>' + date + '\n' +
      '                                    </span>\n' +
      '                                </div>\n' +
      '                            </div>\n' +
      '                        </div>\n' +
      '                    </div>\n' +
      '                </div>';
  }
  return element;
}

function animatedMarkers(map, propertiesMarkers, properties, layout) {
  var bounds = map.getBounds();
  var propertiesArray = [];
  $.each(propertiesMarkers, function (key, value) {
    if (bounds.contains(propertiesMarkers[key].getLatLng())) {
      propertiesArray.push(insertPropertyToArray(properties.data[key], layout));
      setTimeout(function () {
        if (propertiesMarkers[key]._icon != null) {
          propertiesMarkers[key]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable bounce-animation marker-loaded';
        }
      }, key * 50);
    }
    else {
      if (propertiesMarkers[key]._icon != null) {
        propertiesMarkers[key]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable';
      }
    }
  });
  $('.fetching-properties').html(propertiesArray);
}

function generateMap(latitude, longitude, mapProvider, layout) {

  var map = L.map('map', {
    center: [latitude, longitude],
    zoom: 14,
    scrollWheelZoom: false
  });

  L.tileLayer.provider(mapProvider).addTo(map);
  var markers = L.markerClusterGroup({
    showCoverageOnHover: false,
    zoomToBoundsOnClick: false
  });
  var propertiesMarkers = [];

  $.each(properties.data, function (index, property) {
    var icon = '<img src="img/logos/black-logo.png">';
    if (property.type_icon) {
      icon = '<img src="' + property.type_icon + '">';
    }
    var color = '';
    var markerContent =
      '<div class="map-marker ' + color + '">' +
      '<div class="icon">' +
      icon +
      '</div>' +
      '</div>';

    var _icon = L.divIcon({
      html: markerContent,
      iconSize: [36, 46],
      iconAnchor: [18, 32],
      popupAnchor: [130, -28],
      className: ''
    });

    var marker = L.marker(new L.LatLng(property.latitude, property.longitude), {
      title: property.title,
      icon: _icon
    });

    propertiesMarkers.push(marker);
    marker.bindPopup(drawInfoWindow(property));
    markers.addLayer(marker);
    marker.on('popupopen', function () {
      this._icon.className += ' marker-active';
    });
    marker.on('popupclose', function () {
      this._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded';
    });
  });

  map.addLayer(markers);
  animatedMarkers(map, propertiesMarkers, properties, layout);
  map.on('moveend', function () {
    animatedMarkers(map, propertiesMarkers, properties, layout);
  });

  $('.fetching-properties .property-box-2, .fetching-properties .property-box').hover(
    function () {
      propertiesMarkers[$(this).attr('id') - 1]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded marker-active';
    },
    function () {
      propertiesMarkers[$(this).attr('id') - 1]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded';
    }
  );



  $('.geolocation').on("click", function () {
    map.locate({ setView: true })
  });
  $('#map').removeClass('fade-map');
}